<template>
  <div class="orderList">
    <!-- 头部 -->
    <h6><span>首页</span>
      <span>></span>
      <span>我的商城</span>
      <span>></span>
      <span>我的订单</span>
    </h6>
    <!--center -->
    <div class="center">
      <div class="myOrderHeader">
        <div class="left">我的订单</div>
        <div class="right">
          <span>最近六个月内的订单</span>
          <span>六个月前订单</span>
        </div>
      </div>
      <div class="myOrderFooter">
        <div class="title">
          <span>全部有效订单</span>
          <span>待付款</span>
          <span>待收货</span>
          <span>已完成</span>
          <span>待评价</span>
          <span>已取消</span>
        </div>
        <div class="contenetBox">
          <div class="smallTitle">
            <div class="smallTitleLeft">商品</div>
            <div class="smallTitleRight">
              <span>单价/元</span>
              <span>数量</span>
              <span>状态</span>
              <span>实际付款/元</span>
              <span>订单状态及操作</span>
            </div>
          </div>
          <div class="container">
            <div class="Cart content" @mousemove="sss">


              <div class="top">
                <input class="quanxuan" type="checkbox" v-model="isAllChecked" @click="changeAll(isAllChecked)"> 您还没有支付
              </div>
              <ul v-if="goods.length ==0" class="shadow">你还没有添加订单
              </ul>
              <ul v-else v-for="good in goods" class="center">
                <li>
                  <div class="select">
                    <input type="checkbox" :checked="good.select" @click="good.select = !good.select">
                  </div>
                  <div class="pic">
                    <img :src="good.s_good.s_goods_photos[0].path" alt="">
                  </div>
                  <div class="name">
                    {{good.s_good.name}}
                  </div>
                  <div class="price">
                    ￥ <span>{{good.s_good.price.toFixed(2)}}</span>
                  </div>
                  <div class="number">
                    <button @click="good.num--" :disabled="good.num===1">-</button>
                    <span>{{good.num}}</span>
                    <button @click="good.num++" :disabled="good.num == good.s_good.stock_num">+</button>
                  </div>
                  <div class="subtotal">
                    ￥ <span>{{(1*good.s_good.price*good.num).toFixed(2)}}</span>
                  </div>
                  <ul class="waitPay">
                    <li @click="inmmediatePay">立即支付</li>
                    <li>取消订单</li>
                    <li>修改订单</li>
                    <li>订单详情</li>
                  </ul>
                </li>
              </ul>


            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//引入接口数据
import { getCartInfo, del } from "../assets/request.js"
export default {
  name: 'OrderList',
  data() {
    return {
      //存储所有商品信息
      goods: [],
      //ids接收所有商品id
      ids: [],
      //接收判断全选的布尔值
      val: true,
      //接收选中的商品
      goodSelect: [],
      //接收选中的地址
      addressDesc: "请选择好您的地址",
    }
  },
  computed: {
    // ...mapState("cart",["goods"]),
    //判断标准:已选择的数量===数组的长度,那么全选对钩
    //数组goods的长度
    total() {
      return this.goods.length;
    },
    //选中的数量
    selectTotal() {
      return this.goods.reduce((prev, item, index) => { return prev += item.select ? 1 : 0 }
        , 0)
    },
    //是否全选啊
    isAllChecked: {
      get() {
        //console.log(this.total,this.selectTotal);
        return this.total === this.selectTotal;
      },
      set(value) {
        // this.val = value;
        // console.log(value);
        this.goods.forEach((ele) => {
          //  this.$set(element,"checked",value)
          ele.checked = value
        })
      }
    },
    //总选中的购买数量
    totalSum() {
      return this.goods.filter((item) => item.select)
        .reduce((prev, item) => prev += item.num
          , 0)
    },
    //购物车商品总数量
    cart_sum() {
      return this.goods.reduce((prev, item) => {
        return prev += item.num
      }, 0)
    },
    //总价
    totalMoney() {
      return this.goods.filter((item) => item.select)
        .reduce((prev, good) => prev += good.s_good.price * good.num
          , 0)


    },


  },
  watch: {

  },
  methods: {
    //到支付页
    inmmediatePay() {
      this.$router.push(
        {
          name: 'orderpay'
        }
      )
    },
    //  ...mapActions("cart",["getShops"]),
    async updataGetCartInfo() {
      await getCartInfo({
        project_id: 260,
      })
    },

    sss() {

      this.addressDesc = JSON.parse(sessionStorage.getItem('itemSelect')).desc
    },
    ///全选 点击后,就让单选项的checked的值都变为全选的checked
    changeAll(value) {
      //console.log(value);
      value = !value
      this.goods.forEach((element) => {
        element.select = value
        //  this.$set(element,"checked",true)
      })
    },
    //跳转到订单页
    goOrderPay() {
      this.$router.push({
        name: "orderpay"
      })
    },
    // 删除该项商品
    async deleteOne(id) {
      //console.log(id);

      let delRes = await del(id);

      if (confirm("确定删除该商品吗,亲亲?")) {

        //更新本地页面
        let cartInfomation = await getCartInfo({
          project_id: 260,
        });
        //console.log(cartInfomation);
        this.goods = cartInfomation.data.result;
        //this.reload(); 
      }

    },
    //清空购物车
    clearAll() {
      if (confirm("你他妈都要删除,亲亲?")) {
        //console.log(this.goods);
        this.goods.forEach((good, index) => this.ids[index] = good.id)
        this.ids.forEach(async (item) => {
          let rrr = await del(item);
          //更新本地页面
          let cartInfomation = await getCartInfo({
            project_id: 260,
          });
          this.goods = cartInfomation.data.result;


        })


      }

    },
    //删除已选中的
    deleteSelect() {
      if (confirm("不要离开我呜呜呜,亲亲")) {
        this.goods.filter(async (good) => {
          if (good.select) { await del(good.id) }
          //刷新
          let cartInfomation = await getCartInfo({
            project_id: 260,
          });
          this.goods = cartInfomation.data.result;
        })

      }

    },
    //返回列表页
    fanhui() {
      this.$router.push(
        {
          name: "Index",
        }
      )
    },
    //没有商品回到首页区选购
    goIndex() {
      this.$router.push({
        name: "Index",
      })
    },
  },
  //获取购物车信息
  async mounted() {

    this.updataGetCartInfo();
    this.addressDesc = JSON.parse(sessionStorage.getItem('itemSelect')).desc
    console.log(this.addressDesc);

    // this.reload();
    //console.log(cartInfomation);
    this.goods = JSON.parse(sessionStorage.getItem("goodSelect"))
    this.goods.forEach((element) => {
      this.$set(element, "select", true)
    })
    //console.log(this.goods);
    // await this.getShops();
    // console.log(this.goods.length);
  },
}

</script>

<style lang='scss' scoped>
@charset 'utf-8';
@import '../../public/scss/common.scss';

//vw单位响应式布局
@function get($a) {
  @return ($a/1920)*100+vw
}

$color: #e1251b;
/* 页面主调配色 */
$color1: #f1f3f5;

/* main以及占位部分背景色 */
.orderList {
  width: 1226px;
  min-width: 1226px;
  margin: 0 auto;

  //头部 
  >h6 {
    margin: 20px 0;
    font-size: 12px;
    font-weight: 400;
    opacity: .8;
    text-align: start;
    display: flex;
    justify-content: start;

    >span {
      padding: 0 10px;
    }
  }

  .center {
    @extend.orderList;

    >.myOrderHeader {
      overflow: hidden;
      border-bottom: 1px solid rgb(224, 223, 223);
      //opacity: 0.6;
      // background-color: $color1;

      >.left {
        height: 40px;
        line-height: 40px;
        float: left;
        font-size: 20px;
        margin-left: 18px;

        &:hover {
          border-bottom: 1px solid $color;
          color: $color;
        }
      }

      >.right {

        float: right;
        display: flex;

        >span {
          display: block;
          padding: 0 20px;
          height: 40px;
          line-height: 40px;

          &:hover {
            border-bottom: 1px solid $color;
            color: $color;
          }
        }
      }
    }

    >.myOrderFooter {
      //overflow: hidden; 
      margin-top: 20px;
      text-align: start;
      //display: flex;
      justify-content: space-between;

      >.title {
        >span {
          //text-align: start;
          padding: 6px 20px;
          background-color: $color1;
          margin-right: 20px;
          margin-left: 20px;
          border-radius: 2px;

          &:hover {
            background-color: $color;
            color: #fff;
            //border: 1px solid ;
          }
        }
      }

      //订单详情
      >.contenetBox {
        overflow: hidden;
        width: 1226px;
        //background-color: green;
        margin-top: 20px;

        //display: flex;
        >.smallTitle {
          background-color: $color1;
          display: flex;
          justify-content: space-around;

          >.smallTitleLeft {
            padding: 0 20px;
            height: 30px;
            line-height: 30px;
          }

          >.smallTitleRight {
            line-height: 30px;
            display: flex;
            justify-content: space-around;

            >span {
              padding: 0 20px;
              margin-right: 20px;
            }
          }
        }


      }
    }
  }
}

.container {
  margin-top: 10px;
  //background-color: $color1;
  //height: 500px;
}

.content {
  overflow: hidden;
  width: 1226px;
  padding: 10px 0;
  margin: 0 auto;
  margin-top: 0;
  display: flex;
  flex-direction: column;

  >h1 {
    margin-bottom: get(60);
    text-align: start;
  }

  .classfiy {
    display: flex;
    justify-content: space-around;
    margin-bottom: get(20);

    >li {
      opacity: .8;
      font-size: get(12);
      font-weight: 600;
    }
  }

  .xiantiao {
    height: get(1);
    background-color: green;
    margin-bottom: get(50);
  }

  .top>.quanxuan {
    color: black;



  }

  .top .bottom {
    height: 40px;
    display: flex;
    align-items: center;
    background-color: pink;
  }
}

.content .top,
.content .bottom {
  overflow: hidden;
  background-color: $color1;
}

.content .top {
  width: 1226px;
  text-align: start;
}

.content .top>input {
  width: 20px;
  height: 20px;
  margin: 0 20px;
}

.content>.shadow {
  overflow: hidden;
  width: 1226px;
  height: 100px;
  margin-top: 100px;
  margin-left: 400px;
}

.content .bottom {
  text-align: end;
  box-shadow: 1px 1px 6px 1px rgb(222, 220, 220), inset;
  padding-right: 30px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: end;
  //background-color: $color;
  // justify-content: space-around;
  //border: 1px solid $color;
}

.content .bottom>p {
  font-size: 20px;
  margin-top: 20px;
}

.content .bottom>p>button {
  font-size: 20px;
  padding: 3px 10px;
  cursor: pointer;
  color: #000;
  margin-left: 20px;
  margin-bottom: 20px;
}

.pay {
  font-size: 18px;
  text-align: center;
  color: #fff;
  background-color: $color;
  width: 100px;
  height: 40px;
  line-height: 40px;
  border-radius: 20px;
}

.content .bottom>p>span {
  color: red;
}

.content>.center {
  width: 1226px;
}

.content>.center>li {
  width: 1210px;
  height: 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #333;
  box-sizing: border-box;
  margin: 10px 0;
  border-radius: 4px;
}

.content>.center>li>div {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-size: 20px;
}

.content>.center>li>div>span {
  color: #000;
  padding: 0 4px;
}

.content>.center>li>div:first-child>input {
  width: 20px;
  height: 20px;
}

.content>.center>li>div>button {
  font-size: 10px;
  padding: 5px 4px;
  cursor: pointer;
}

.content>.center>li>div.del>button {
  background-color: red;
  color: #fff;
}

.content>.center>li>div.number>input {
  width: 20px;
  height: 24px;
  font-size: 20px;
  text-align: center;
}

.select,
.pic,
.del {
  width: 100px;
}

.name,
.price,
.subtotal {
  width: 200px;
}

.number {
  width: 100px;
}

.waitPay {
  >li {
    padding: 2px 6px;
    margin: 2px 4px;
    border: 1px solid rgb(148, 147, 147);
    border-radius: 2px;

    &:hover {
      background-color: $color;
      color: #fff;
    }
  }
}
</style>
